<template>
  <div>
    <a-grid :cols="24" :row-gap="16" class="panel">
      <a-grid-item
        :class="`panel-col panel-col_${index + 1}`"
        :span="{ xs: 6, sm: 6, md: 6, lg: 6, xl: 6, xxl: 6 }"
        v-for="(item, index) in amount"
        :key="item.name"
      >
        <img class="icon" :src="item.icon" />
        <div class="">
          <span class="name fff">
            {{ item.name }}
            <a-tooltip>
              <icon-question-circle class="svgtooltip fff" />
              <template #content>
                <div v-if="Array.isArray(item.tooltip)">
                  <div v-for="(tip, i) in item.tooltip" :key="i"> {{ i + 1 }}. {{ tip }} </div>
                </div>
                <div v-else>
                  {{ item.tooltip + '：' + item.count + '辆' }}
                </div>
              </template>
            </a-tooltip>
          </span>
        </div>
        <div class="money mt8 fff">{{ renderformatPrice(item.data) }}<span class="unit ml8 fff">元</span></div>
        <div class="mt8" v-if="index > 0">
          <span>
            <span class="label fff">同比</span>
            <span class="fff">
              <span v-if="item.lastYearRate">
                <icon-arrow-rise v-if="item.lastYearRate > 0" class="mr4 fff" />
                <icon-arrow-fall v-else class="mr4 fff" />
              </span>
              {{ renderunit(item.lastYearRate) }}
            </span>
          </span>
          <span class="ml30">
            <span class="label fff">环比</span>
            <span class="fff">
              <span v-if="item.lastCycleRate">
                <icon-arrow-rise v-if="item.lastCycleRate > 0" class="mr4 fff" />
                <icon-arrow-fall v-else class="mr4 fff" />
              </span>
              {{ renderunit(item.lastCycleRate) }}
            </span>
          </span>
        </div>
        <div class="mt8" v-else>
          <span class="count">
            <span>车辆数：</span>
            <span>
              <span>{{ item.count }}辆</span>
            </span>
          </span>
        </div>
      </a-grid-item>
    </a-grid>
  </div>
</template>

<script setup name="carmodal">
  import { ref, watch } from 'vue'
  import icon1 from '@/assets/databoard/dataicon1.png'
  import icon2 from '@/assets/databoard/dataicon2.png'
  import icon3 from '@/assets/databoard/dataicon3.png'
  import icon4 from '@/assets/databoard/dataicon4.png'
  const amount = ref([
    {
      name: '总资产',
      tooltip: [
        '总资产：车辆状态为空闲可租、租赁中、运维中、已借出车辆的购置费、购置补充费之和',
        '车辆数：运营状态为空闲可租、租赁中、运维中、已借出的车辆数之和',
      ],
      icon: icon1,
    },
    {
      name: '总收入',
      tooltip: [
        '财务模块下短租对账、自驾长租费用、违章费用、调车结算、车辆购置费结算中所有已收款的费用之和',
        '同比：根据已选时间段与已选时间段的前一年相同时间段做比较，计算总收入的同比增长率',
        '环比：根据已选时间段与已选时间段的前一时间段做比较，计算总收入的环比增长率',
      ],
      count: '',
      lastYearRate: '',
      lastCycleRate: '',
      icon: icon2,
    },
    {
      name: '总支出',
      tooltip: [
        '财务模块下短租对账、自驾长租费用、违章费用、运维结算、调车结算、车辆购置费结算以及业务模块下的运营成本中所有已付款的费用之和',
        '同比：根据已选时间段与已选时间段的前一年相同时间段做比较，计算总支出的同比增长率',
        '环比：根据已选时间段与已选时间段的前一时间段做比较，计算总支出的环比增长率',
      ],
      count: '',
      lastYearRate: '',
      lastCycleRate: '',
      icon: icon3,
    },
    {
      name: '总利润',
      tooltip: [
        '总利润=总收入 - 总支出',
        '同比：根据已选时间段与已选时间段的前一年相同时间段做比较，计算总利润的同比增长率',
        '环比：根据已选时间段与已选时间段的前一时间段做比较，计算总利润的环比增长率',
      ],
      count: '',
      lastYearRate: '',
      lastCycleRate: '',
      icon: icon4,
    },
  ])
  const renderunit = (data) => {
    if (data) {
      return data < 0 ? data * -1 + '%' : data + '%'
    } else {
      return '-'
    }
  }
  const props = defineProps({
    briefReportlistamount: Object,
  })
  const renderformatPrice = (price) => {
    return price || price === 0 ? formatPrice(price.toFixed(2)) : '-'
  }
  const formatPrice = (price) => {
    return String(price).replace(/\B(?=(\d{3})+(?!\d))/g, ',')
  }
  watch(
    () => props.briefReportlistamount,
    () => {
      const { car, totalRevenue, totalExpenditure, totalProfit } = props.briefReportlistamount
      amount.value.forEach((item, index) => {
        if (index === 0) {
          return Object.assign(item, car)
        } else if (index === 1) {
          return Object.assign(item, totalRevenue)
        } else if (index === 2) {
          return Object.assign(item, totalExpenditure)
        } else {
          return Object.assign(item, totalProfit)
        }
      })
    },
    { immediate: true, deep: true }
  )
</script>

<style lang="less" scoped>
  .ml8 {
    margin-left: 8px;
  }
  .ml30 {
    margin-left: 30px;
  }
  .mr4 {
    margin: 0 4px;
  }
  .mt8 {
    margin-top: 8px;
  }
  .pd14 {
    padding-top: 14px;
  }
  .svgtooltip {
    margin-left: 4px;
  }
  .fff {
    color: #fff;
  }
  .icon {
    display: inline-block;
    width: 100px;
    position: absolute;
    bottom: 30px;
    right: 0;
  }
  .name {
    font-size: 16px;
    font-family: PingFang SC-Semibold, PingFang SC;
    font-weight: 600;
    line-height: 24px;
  }
  .label {
    font-size: 14px;
    font-family: PingFang SC-Regular, PingFang SC;
    font-weight: 400;
    line-height: 17px;
  }
  .money {
    font-size: 28px;
    font-family: PingFang SC-Semibold, PingFang SC;
    font-weight: 600;
    line-height: 34px;
    word-break: keep-all;
  }
  .unit {
    font-size: 12px;
    font-family: PingFang SC-Regular, PingFang SC;
    font-weight: 400;
    line-height: 14px;
  }
  .count {
    font-family: PingFang SC, PingFang SC;
    font-weight: 600;
    font-size: 16px;
    color: #ffffff;
    line-height: 16px;
    text-align: left;
    font-style: normal;
    text-transform: none;
  }
  .arco-grid.panel {
    margin-bottom: 0;
  }
  .panel-col {
    width: 95%;
    height: 160px;
    padding: 14px 0 14px 20px;
    position: relative;
  }
  .panel-col_1 {
    background: url('../../../../assets/databoard/data1.png') no-repeat;
    background-size: 100% 100%;
    // padding-top: 28px;
  }
  .panel-col_2 {
    background: url('../../../../assets/databoard/data2.png') no-repeat;
    background-size: 100% 100%;
  }
  .panel-col_3 {
    background: url('../../../../assets/databoard/data3.png') no-repeat;
    background-size: 100% 100%;
  }
  .panel-col_4 {
    background: url('../../../../assets/databoard/data4.png') no-repeat;
    background-size: 100% 100%;
  }
  .col-avatar {
    margin-right: 12px;
    background-color: var(--color-fill-2);
  }
</style>
